<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>07_自定义JS对象</title>
</head>
<body>
<table border="1px">
    <tr>
        <th>商品名称</th>
        <th>商品价格</th>
        <th>商品库存</th>
    </tr>
</table>
<script>
    let productArr = [
        {title: '苹果', price: 80, number: 2500},
        {title: '葡萄', price: 180, number: 5300},
        {title: '山竹', price: 280, number: 3500},
        {title: '山竹', price: 280, number: 3500},
        {title: '山竹', price: 280, number: 3500},
        {title: '山竹', price: 280, number: 3500},
        {title: '榴莲', price: 380, number: 1500}

    ];

    let tableE = document.querySelector('table');
    for (let i = 0; i < productArr.length; i++) {
        let trE = document.createElement('tr');
        let titleTd = document.createElement('td');
        let priceTd = document.createElement('td');
        let numTd = document.createElement('td');
        titleTd.innerHTML = productArr[i].title;
        priceTd.innerHTML = productArr[i].price;
        numTd.innerHTML = productArr[i].number;
        trE.append(titleTd, priceTd, numTd);
        tableE.append(trE);
    }

</script>
</body>
</html>